<template>
  <div class="full-box shadow-box padding-box">
    <OperateCommon :showSearch="true" @search="initData">
      <template #condition>
        <div class="condition-item">
          <label>年份</label>
          <el-date-picker
            style="width: 150px"
            v-model="queryParams.year"
            type="year"
            value-format="yyyy"
            placeholder="选择上报年份"
          >
          </el-date-picker>
        </div>
        <div class="condition-item">
          <label>月份</label>
          <el-date-picker
            style="width: 150px"
            v-model="queryParams.month"
            type="month"
            format="MM"
            value-format="MM"
            placeholder="选择上报月份"
          >
          </el-date-picker>
        </div>
        <div class="condition-item">
          <label>项目名称</label>
          <el-input v-model="queryParams.project_name" placeholder="">
          </el-input>
        </div>
        <div class="condition-item">
          <label>进度状态</label>
          <el-select
            style="width: 130px"
            v-model="queryParams.report_status"
            value-key=""
            placeholder=""
            clearable
            filterable
          >
            <el-option :key="0" label="全部" value=""></el-option>
            <el-option :key="1" label="暂存" value="0"></el-option>
            <el-option :key="2" label="待审核" value="10"></el-option>
            <el-option :key="3" label="退回" value="5"></el-option>
            <el-option :key="4" label="通过" value="100"></el-option>
          </el-select>
        </div>
        <div class="condition-item">
          <label>责任单位</label>
          <DeptCascader
            :options="deptOptions"
            :defaultChecked.sync="queryParams.responsible_unit_id"
            @change="changeDeptResponse"
          ></DeptCascader>
        </div>
        <div class="condition-item">
          <label>项目标签</label>
          <el-select
            v-model="queryParams.label_important"
            value-key=""
            placeholder=""
            clearable
          >
            <el-option label="全市项目" value=""></el-option>
            <el-option label="重大项目" value="0"></el-option>
            <el-option label="非重大项目" value="1"></el-option>
          </el-select>
        </div>
        <div class="condition-item">
          <label>投资类型</label>
          <el-select
            style="width: 120px"
            v-model="queryParams.Invest_type"
            value-key=""
            placeholder=""
            clearable
          >
            <el-option label="全部" value=""></el-option>
            <el-option label="政府投资" value="政府投资"></el-option>
            <el-option label="国企投资" value="国企投资"></el-option>
          </el-select>
        </div>
      </template>
    </OperateCommon>
    <div class="table-wrapper">
      <BaseTable
        :columns="columns"
        :showSort="true"
        :tableData="tableData"
        :pages="{
          show: true,
          count: count
        }"
        :operate="{
          show: true,
          width: 150
        }"
        @pagination="pageChange"
      >
        <template #operate="{ current }">
          <el-button
            type="primary"
            size="mini"
            @click="
              linkTo(
                `majorProjectPromotion/progressDetails/${current.row.project_id}/${queryParams.year}/${queryParams.month}/999`
              )
            "
            >详情</el-button
          >
        </template>
      </BaseTable>
    </div>
  </div>
</template>

<script>
import BaseTable from '@/components/Common/BaseTable.vue';
import OperateCommon from '@/components/Common/OperateCommon.vue';
import LinkTo from '@/mixins/LinkTo';
import commonList from '@/mixins/commonList';
import {
  getProgressCondition,
  getProgressReviewList
} from '@/api/MajorProjectPromotion/Index';
import { getBMMonthProgress } from '@/api/BackendManage/Index';
import DeptCascader from '@/components/Common/DeptCascader.vue';
import { getDeptTree } from '@/api/System/Department';
export default {
  mixins: [LinkTo, commonList],
  components: { BaseTable, OperateCommon, DeptCascader },
  data() {
    return {
      columns: columns,
      tableData: [],
      count: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        project_name: '',
        year: '',
        month: '',
        report_status: '',
        label_important: '',
        responsible_unit_id: '',
        Invest_type: ''
      },
      deptOptions: []
    };
  },
  methods: {
    async initCondition() {
      await getProgressCondition().then((res) => {
        if (res.code == 0 && res.data) {
          this.queryParams.year = res.data.cycle_year;
          this.queryParams.month = res.data.cycle_month;
        }
      });
      await getDeptTree().then((res) => {
        if (res.code == 0) {
          this.deptOptions = res.data;
        }
      });
    },
    initData() {
      getBMMonthProgress(this.queryParams).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.map((i) => {
            switch (parseInt(i.report_status)) {
              case 0:
                i.report_status_text = '暂存';
                break;
              case 10:
                i.report_status_text = '待审核';
                break;
              case 20:
                i.report_status_text = '退回';
                break;
              case 100:
                i.report_status_text = '通过';
                break;
              default:
                i.report_status_text = '未上报';
                break;
            }
            return i;
          });
          this.count = res.num;
        }
      });
    },
    pageChange(val) {
      this.queryParams.pageNum = val.pageNum;
      this.queryParams.pageSize = val.pageSize;
      this.initData();
    },
    changeDeptResponse(val) {
      this.queryParams.responsible_unit_id = val.value;
    }
  },
  created() {
    this.queryParams.year = new Date().getFullYear().toString();
    this.queryParams.month = new Date().getMonth() + 1 + '';

    this.initCondition().then(() => {
      this.initData();
    });
  }
};

const columns = [
  {
    prop: 'project_name',
    label: '项目名称',
    width: '',
    minWidth: '300',
    align: ''
  },
  {
    prop: 'Invest_type',
    label: '投资类型',
    width: '',
    minWidth: '100',
    align: ''
  },
  {
    prop: 'build_kind',
    label: '建设性质',
    width: '',
    minWidth: '100',
    align: ''
  },
  // {
  //   prop: "",
  //   label: "进度周期",
  //   width: "",
  //   minWidth: "100",
  //   align: "",
  // },
  {
    prop: 'report_status_text',
    label: '上报状态',
    width: '',
    minWidth: '100',
    align: ''
  },
  {
    prop: 'create_user_name',
    label: '上报人',
    width: '',
    minWidth: '100',
    align: ''
  },
  {
    prop: 'create_time',
    label: '上报时间',
    width: '150',
    minWidth: '',
    align: ''
  }
];
</script>

<style lang="scss" scoped=""></style>
